<template>
  <view class="ui-page page-user">
    <uiCellGroup>
      <uiCell titleWidth="400rpx" clickable @click="handleClickUpdateAvatar">
        <template v-slot:title>
          <view class="user-avatar ui-flex flex--vcenter">
            <view class="user-avatar-image">
              <image class="user-avatar-image--image" :src="userInfo.avatar" />
            </view>
            <view class="user-avatar-tips ui-txt">设置头像</view>
          </view>
        </template>
      </uiCell>
    </uiCellGroup>
    <uiCellGroup titleWidth="400rpx">
      <uiCell title="真实姓名" clickable :value="userInfo.realName" @click="handleClickUpdateRealName"></uiCell>
      <uiCell title="用户名" isLink></uiCell>
      <uiCell title="昵称" isLink></uiCell>
      <uiCell title="性别" isLink></uiCell>
      <uiCell title="出生日期" isLink></uiCell>
      <uiCell title="手机号码" isLink></uiCell>
      <uiCell title="所在地址" isLink></uiCell>
      <uiCell title="电子邮箱" clickable to="/pages/profile-editinfo/profile-email-modify/index"></uiCell>
    </uiCellGroup>
  </view>
</template>
<script>
import uiCell from "@/components/base/cell/index.vue";
import uiCellGroup from "@/components/base/cell-group/index.vue";
import uiForm from "@/components/base/form/index.vue";
import uiField from "components/base/field/index";
import uiCheckBox from "@/components/base/checkbox/index.vue";
import uiSwitch from "@/components/base/switch/index.vue";
import uiTag from "@/components/base/tag/index.vue";
import uiIcon from "@/components/base/icon/index.vue";
import uiDialog from "@/components/base/dialog/index.vue";

import { getUserInfoByUserId } from "@/api/base/user.js";

export default {
  name: "pageAddressEdit",
  components: {
    uiCellGroup,
    uiCell,
    uiCheckBox,
    uiSwitch,
    uiTag,
    uiIcon,
    uiDialog
  },
  data() {
    return {
      name: "",
      phone: "",
      address: "",
      provice: "",
      addressTag: "",
      isDefault: false,

      tags: [
        {
          value: 1,
          label: "家"
        },
        {
          value: 2,
          label: "公司"
        }
      ],

      userInfo: {
        avatar: "",
        phone: "",
        realName: "请填写",
        name: null,
        nickName: null,
        sex: null,
        birthdate: null,
        address: null,
        email: null
      }
    };
  },
  computed: {},

  created() {
    this.loadUserInfo();
  },
  methods: {
    loadUserInfo() {
      getUserInfoByUserId().then(({ respCode, respMsg, result }) => {
        if (respCode !== "0") {
          // 加载失败
          this.$toast.fail(respMsg);
          return;
        }
        this.userInfo.avatar = result.avatar;
        this.userInfo.phone = result.phone;
        this.userInfo.realName = result.realName || "请填写";
        this.userInfo.name = result.name;
        this.userInfo.nickName = result.nickName;
        this.userInfo.sex = result.sex;
        this.userInfo.birthdate = result.birthdate;
        this.userInfo.address = result.address;
        this.userInfo.email = result.email;
      });
    },
    handleClickAddressSelect() {},
    handleClickTag(tag) {
      this.addressTag = tag.value;
    },
    handleClickAddTag() {
      console.log("11");
      this.realNameVisible = true;
    },

    handleClickUpdateRealName() {
      this.realNameVisible = true;
    },
    handleClickUpdateAvatar() {
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ["compressed"], //可以指定是原图还是压缩图，默认二者都有
        success: function(res) {
          console.log(JSON.stringify(res.tempFilePaths));
        }
      });

      // let formData = new window.FormData();
      // // let _imgUrl;
      // formData.append('file', this.$refs.fileIpt.files[0]);
      // // console.log(formData);
      // api.translateImgUrl(formData).then(({ respCode, respMsg, result }) => {
      //   if (respCode == 0) {
      //     this.userInfo.avatar = result.path;
      //     api.applytUserInfo(this.userInfo).then(({ respCode, respMsg, result }) => {
      //       if (respCode == 0) {
      //         this.$toast({
      //           message: `信息修改成功`,
      //           width: '9rem',
      //           time: '2000',
      //           position: 'middle',
      //           type: 'text',
      //         });
      //         this.originData();
      //       }
      //     });
      //   }
      // });
    }
  }
};
</script>
<style lang="scss" scoped>
.page-address-edit {
  .address-container {
    &:before {
    }
  }

  .address-edit-tag + .address-edit-tag {
    margin-left: 20upx;
  }

  .address-edit-tag--edit {
    .edit-icon {
      margin-right: 8upx;
    }
  }
}

.user-avatar {
  .user-avatar-image {
    width: 145rpx;
    height: 145rpx;
    margin-right: 20rpx;
    .user-avatar-image--image {
      width: 145rpx;
      height: 145rpx;
      border-radius: 50%;
    }
  }
}
</style>
